<template>
  <el-dialog
  :title="dataForm.id ? '修改' : '新增'"
  :visible.sync="dialogVisible"
  :append-to-body="true"
  :close-on-click-modal="false"
  @close="handleColse"
  width="40%"
  >
    <el-form
      :model="dataForm"
      :rules="dataFormRules"
      ref="dataForm"
      size="small"
      label-width="80px"
    >
      <el-form-item label="参数名称" prop="name">
        <el-input v-model="dataForm.name" placeholder="参数名称"></el-input>
      </el-form-item>
      <el-form-item label="标识符" prop="code">
        <el-input v-model="dataForm.code" placeholder="请输入唯一标识"></el-input>
      </el-form-item>
      <el-form-item label="参数值" prop="value">
        <el-input v-model="dataForm.value" placeholder="参数值"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="dataForm.description" placeholder="描述"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button
        @click="dialogVisible = false"
        size="small">取消</el-button>
      <el-button
        type="primary"
        :loading="dialogLoading"
        @click="handleSubmitForm"
        size="small">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {queryConfig, queryConfigDetail} from '@/api/dailyweekly/workflow'
  export default {
    data() {
      return {
        dialogVisible: false,
        dataForm: {
          id: '',
          name: '',
          code: '',
          value: '',
          description: ''
        },
        dialogLoading: false,
        dataFormRules: {
          name: [
            { required: true, message: "参数名称不能为空", trigger: "blur" }
          ],
          code: [
            { required: true, message: "标识不能为空", trigger: "blur" }
          ],
          value: [
            { required: true, message: "参数值不能为空", trigger: "blur" }
          ]
        }
      }
    },
    methods: {
      async queryConfigDetail () {
        const data = await queryConfigDetail(this.dataForm.id)
        if (data) {
          if (data.code === 200) {
            this.dataForm = data.data
          } else {
            this.dialogVisible = true
          }
        }
      },
      async addDataFrom (val) {
        const data = await queryConfig(this.dataForm, val)
        if (data) {
          if (data.code === 200) {
            this.dialogVisible = false
            this.$emit('queryList')
          } else {
            this.dialogVisible = true
          }
        }
      },
      init (val) {
        this.dataForm.id = val || ''
        this.dialogVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.queryConfigDetail()
          }
        })
      },
      handleSubmitForm () {
        if (this.dataForm.id) {
          this.addDataFrom('put')
        } else {
          this.addDataFrom('post')
        }
      },
      handleColse () {
        this.dialogVisible = false
      }
    }
  }
</script>

<style scoped>

</style>
